<template>
  <div class="user">
    <van-nav-bar title="账号" />
    <div class="news">
      <van-icon name="envelop-o" class="icon-116" />
      <p class="news-letter">消息中心</p>
      <van-icon name="arrow" class="icon-115" />
    </div>
    <div class="interest-data">
      <div class="personal-data">
        <van-icon name="user-o" class="icon-116" />
        <p class="news-letter" @click="person">个人资料</p>
        <van-icon name="arrow" class="icon-115" />
      </div>
      <div class="interest">
        <van-icon name="bookmark-o" class="icon-116" />
        <p class="news-letter" @click="interest">学习兴趣</p>
        <van-icon name="arrow" class="icon-115" />
      </div>
    </div>
    <div class="interest-data">
      <div class="personal-data">
        <van-icon name="gold-coin-o" class="icon-116" />
        <p class="news-letter" @click="recharge">我的余额</p>
        <van-icon name="arrow" class="icon-115" />
      </div>
      <div class="interest">
        <van-icon name="orders-o" class="icon-116" />
        <p class="news-letter">我的订单</p>
        <van-icon name="arrow" class="icon-115" />
      </div>
    </div>
    <div class="set">
      <van-icon name="setting-o" class="icon-116" />
      <p class="news-letter" @click="set">设置</p>
      <van-icon name="arrow" class="icon-115" />
    </div>

    <div class="idea-evaluate">
      <div class="idea">
        <van-icon name="comment-o" class="icon-116" />
        <p class="news-letter">意见反馈</p>
        <van-icon name="arrow" class="icon-115" />
      </div>
      <div class="evaluate">
        <van-icon name="edit" class="icon-116" />
        <p class="news-letter">给网易云课堂评价</p>
        <van-icon name="arrow" class="icon-115" />
      </div>
    </div>
  </div>
</template>                 

<script>
export default {
  methods: {
    recharge() {
      this.$router.push({
        name: "Balance",
      });
    },
    set() {
      this.$router.push({
        name: "Set",
      });
    },
    interest() {
      this.$router.push({
        name: "Interest",
      });
    },
    person() {
      this.$router.push({
        name: "Person",
      });
    },
  },
  created() {
    this.$store.commit("tabShow");
  },
};
</script>

<style lang="scss" >
.user {
  background-color: #f2f4f8;
  .van-nav-bar__title {
    font-weight: bold;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
  }
  .news,
  .personal-data,
  .interest,
  .set,
  .idea,
  .evaluate {
    width: 375px;
    height: 45px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    background-color: white;
    .icon-116 {
      width: 44px;
      height: 23px;
      font-size: 23px;
      color: rgba(153, 164, 189, 1);
      text-align: center;
    }

    .icon-115 {
      font-size: 17px;
      color: rgba(166, 166, 166, 1);
      margin-right: 9px;
    }

    .news-letter {
      height: 22px;
      color: rgba(80, 80, 80, 1);
      font-size: 14px;
      flex: 1;
    }
  }
  .interest-data,
  .idea-evaluate {
    width: 375px;
    height: 89px;
    top: 128px;
    margin-top: 10px;
    .interest,
    .evaluate {
      margin-top: 1px;
    }
  }
  .set {
    margin-top: 10px;
  }
}
</style>
